<template>
  <div class="box"></div>
  <div class="box1"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {},
  methods: {},
  mounted() {}
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: url('../../images/p1.png') 0 0 / 30px 30px no-repeat, grey linear-gradient(to right, #000, #fff) 0 0 / 100% 30px no-repeat;
}
.box1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  animation: move 5s linear;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, 0) rotate(0deg);
  }
  50% {
    transform: translate(100px, 0) rotate(90deg);
  }
  75%,
  100% {
    transform: translate(-50px, 0) translate(100px, 0) rotate(90deg);
  }
}
</style>
